import React, { FC } from 'react';
import styled from 'styled-components';
import Icon from '@/components/BaseComponent/Icon'
import { NavLink } from 'umi'
import { TabBar } from 'antd-mobile';
import './style.less';
type Props = {}

const Routes = [
  {
    icon: 'shouye',
    path: '/home',
    title: '首页'
  },
  {
    icon: 'gouwuche',
    path: '/cart',
    title: '购物车'
  },
  {
    icon: 'wodedingdan',
    path: '/orderList',
    title: '订单'
  },
  {
    icon: 'gerenzhongxin',
    path: '/person',
    title: '个人中心'
  },
  {
    icon: 'gerenzhongxin',
    path: '/404',
    title: '404'
  },
  // {
  //   icon: 'gerenzhongxin',
  //   path: '/login',
  //   title: 'login'
  // }
]

export const FooterBar = ({}: Props) => (
  <FooterContainer>
    {
      Routes.map((item) => {
        return <NavLink to={item.path} className="icon-box" key={item.path}>
          <span> <Icon className={item.icon}/> </span>
          <span> {item.title} </span>
       </NavLink>
      })
    }
  </FooterContainer>
);

export default FooterBar;

const FooterContainer = styled.footer`
  width: 100%;
  height: 100%;
  display:flex;
  background:#eee;
  &:before {
   position: absolute;
   content: '';
   width: 100%;
   display: block;
   height: .01rem;
   background:#E5E5E5;
   top: 0;
   left: 0;
 }
  .icon-box {
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    span {
      flex: 1;
      width: 100%;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    span:nth-child(1) {
      .iconfont {
        font-size: .4rem;
      }
    }
  }
  .active {
    color: red;
  }
`;

// .content-box:after {
//   position: absolute;
//   content: '';
//   width: 100%;
//   display: block;
//   height: .01rem;
//   background:#E5E5E5;
//   /* background: red; */
//   bottom:0;
//   left: -5px;
// }